<?php include('header.php'); ?>


<div>
    <ul class="breadcrumb">
        <li>
            <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
            <a href="#">Grid</a>
        </li>
    </ul>
</div>

<div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 12</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
</div><!--/row-->

<div class="row-fluid sortable">
    <div class="box span3">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 3</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
    <div class="box span3">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 3</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
    <div class="box span3">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 3</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
    <div class="box span3">
        <div class="box-header well" data-original-title>
            <h2>Plain</h2>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
</div><!--/row-->

<div class="row-fluid sortable">
    <div class="box span6">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 6</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->

    <div class="box span6">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 6</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
</div><!--/row-->
<div class="row-fluid sortable">
    <div class="box span4">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 4</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->

    <div class="box span4">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 4</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->

    <div class="box span4">
        <div class="box-header well" data-original-title>
            <h2><i class="icon-th"></i> Grid 4</h2>
            <div class="box-icon">
                <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
                <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
                <div class="span4"><h6>span 4</h6></div>
            </div>                   
        </div>
    </div><!--/span-->
</div><!--/row-->

<div class="row-fluid">
    <div class="span12 well">
        <div>
            <h1>Box less area</h1>
            <p>The flat boxes can be created using grids. But you can also use grids inside grids, which makes the layout 100% flexible!</p>
        </div>
    </div><!--/span-->
</div><!--/row-->

<div class="row-fluid show-grid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
</div>

<div class="row-fluid show-grid">
    <div class="span4">4</div>
    <div class="span4">4</div>
    <div class="span4">4</div>
</div>

<div class="row-fluid show-grid">
    <div class="span3">3</div>
    <div class="span3">3</div>
    <div class="span3">3</div>
    <div class="span3">3</div>
</div>

<div class="row-fluid show-grid">
    <div class="span4">4</div>
    <div class="span8">8</div>
</div>

<div class="row-fluid show-grid">
    <div class="span6">6</div>
    <div class="span6">6</div>
</div>

<div class="row-fluid show-grid">
    <div class="span12">12</div>
</div>


<?php include('footer.php'); ?>
